<template>
	<div class="newlogin-box">
		<div class="sc-lbOyJj bMNWhD">
			<h3 class="sc-lbxAil ioCJkx">
				<div class="wrap">
					<div class="imgBox">
						<img alt=""  :src="data.logo">
					</div>
				</div>
			</h3>
			<h3>{{data.name}}</h3>
			<div class="sc-iNWwEs fGkUGU" style="margin-top: 1.5rem;">
				<div class="sc-gSAPjG cHATSO">
					<span class="sc-jfmDQi fA-DUjn">{{data.quhao}}</span>
				</div>
				<input type="text" placeholder="携帯電話番号" v-model="postdataLogin.mobile">
			</div>
			<div class="sc-iNWwEs fGkUGU" style="margin-top: 1rem;">
				<img class="pwdIcon" src="" alt="">
				<input  type="password" placeholder="パスワードを入力してください" autocomplete="on" v-model="postdataLogin.password" >
			</div>
			<div class="sc-olbas cXuGMb" @click="login" >ログイン</div>
			<div class="sc-hiMGwR fCBegJ" @click="register">登録する</div>
			<div class="" style="padding: 2.75rem;">
				
			</div>
		</div>
		<!-- <div class="logoBox">
			<div class="logoImg">
				<img :src="data.logo" alt="">
			</div>
			<div class="logoTitle">
				<h5>{{data.name}}</h5>
				<p>{{data.desc}}</p>
			</div>
			<div class="logobut">
				<div class="logobutIt" @click="drawer = true">
					入る
				</div>
				<div class="logobutItTow" @click="drawerTow = true">
					サインイン
				</div>
				<p>言語</p>
			</div>
		</div> -->
		<!-- 注册 -->
		<el-drawer v-model="drawer" title="" direction="btt" :size="550">
			<div class="login-box">
				<div class="titledf">入る</div>
				<div class="titledd">アカウントにサインアップして権限を増やす!</div>
				<form class="form" v-on:submit.prevent>
					<div class="form-box">
						<div class="text">電話番号</div>
						<div class="flex">
							<div class="area">{{data.quhao}}</div>
							<input type="text" class="login-input" maxlength="11" placeholder="携帯電話番号を入力してください"
								v-model="postdata.mobile" />
						</div>

					</div>
					<div class="form-box">
						<h4 class="text">パスワード</h4>
						<div class="flex">
							<input type="password" class="login-input" maxlength="64" placeholder="パスワードを入力してください"
								autocomplete="on" v-model="postdata.password" />
						</div>
					</div>

					<div class="form-box">
						<h4 class="text">パスワードの確認</h4>
						<div class="flex">
							<input type="password" class="login-input" maxlength="64" placeholder="パスワードを再入力してください"
								autocomplete="on" v-model="postdata.confirm" />
						</div>
					</div>
					<div class="form-box">
						<button @click="sub" class="topup">ログイン</button>
					</div>
				</form>
			</div>
		</el-drawer>
		
	</div>
</template>

<script>
	import AJAX from '@/utils/http';
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				drawer: false,
				drawerTow: false,
				postdata: {
					mobile: '',
					password: '',
					confirm: '',
					invite: localStorage.getItem('invite')
				},
				postdataLogin: {
					mobile: '',
					password: ''
				},
				data: {},
			};
		},
		created() {
			// 获取URL参数中的token
			const token = this.$route.query.token;
			if (token !== undefined && token !== null && token !== '') {
				// 执行你的逻辑，比如存储token到本地存储
				localStorage.setItem('token', token);
				this.$router.push('/');
			}
			this.fetchData();
		},
		methods: {
			// 注册
			sub() {
				fbq('track', 'CompleteRegistration');
				if (this.postdata.mobile == '') {

					ElMessage.error('携帯電話番号を入力してください')
					return;
				} else if (this.postdata.password == '') {
					ElMessage.error('パスワードを入力してください')

					return;
				} else if (this.postdata.confirm !== this.postdata.password) {

					ElMessage.error('2 つの一貫性のないパスワード')
					return;
				} else {
					AJAX.post('/user/register', this.postdata).then(e => {
						// 未登录
						if (!e.code || !e.data.token) {

							ElMessage.error(e.msg)
							return;
						}

						localStorage.setItem('token', e.data.token);

						ElMessage.success('登録に成功しました')
						localStorage.removeItem('invite')
						this.$router.replace('/');
						// this.$alert(e.msg, "Ok", {
						//      confirmButtonText: "Ok",
						//      callback: action => {
						//       localStorage.removeItem('invite')
						//       this.$router.replace('/');
						//      }
						// });
					});
				}
			},
			// 登录
			fetchData() {
				AJAX.post('/index/init', {}, {
					showLoading: false
				}).then(e => {
					this.data = e.data;

				});
			},
			register(){
				this.$router.push('/NewRegister');
			},
			login() {

				if (this.postdataLogin.mobile == '') {
					ElMessage.error('携帯電話番号を入力してください')

					return;
				} else if (this.postdataLogin.password == '') {
					ElMessage.error('パスワードを入力してください')

					return;
				} else {
					AJAX.post('/user/login', this.postdataLogin).then(e => {

						// 未登录
						if (!e.code || !e.data.token) {
							ElMessage.error(e.msg)
							return;
						}

						localStorage.setItem('token', e.data.token);

						this.$alert(e.msg, "ヒント", {
							confirmButtonText: "わかった",
							callback: action => {
								this.$router.replace('/');
							}
						});
					});
				}
			}
		}
	}
</script>

<style scoped>
	.login-box {
		justify-content: start;
		padding: 0;
		padding-top: 16px;
	}

	.titledf {
		font-size: 18px;
		color: #000;
	}

	.titledd {
		font-size: 14px;
		color: #000;
		margin: 10px 0px;
	}

	.logoBox {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.logoImg img {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}

	.logoTitle {
		width: 90%;
		margin-bottom: 20px;
	}

	.logoTitle h5 {
		margin-bottom: 10px;
		color: #000;
		font-size: 16px;
	}

	.logoTitle p {
		font-size: 13px;
		color: #aeb1ba;
	}

	.logobut {
		width: 90%;
	}

	.logobutIt {
		width: 100%;
		height: 45px;
		border: 1px solid #000;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		font-size: 15px;
		color: #000;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.logobutItTow {
		width: 100%;
		height: 45px;
		border: 1px solid #1766ff;
		background-color: #1766ff;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		font-size: 15px;
		font-weight: 600;
	}

	.logobut p {
		font-size: 15px;
		text-align: center;
		color: #333;
		margin-top: 20px;
	}

	/deep/.el-drawer__header {
		display: none;
	}

	/deep/.el-drawer {
		border-radius: 15px 15px 0px 0px;
	}

	/deep/.el-drawer__body {
		overflow: hidden;
	}
	
	
	.newlogin-box{
		
	}
	.bMNWhD {
	    height: 100%;
	  
		
		background: url('/img/login-bg.png') 0% 0% / 100% 100% no-repeat;;
		background-size: 100% 100%;
	}
	.ioCJkx {
	    padding-top: 2.8rem;
	    font-size: 19px;
	}
	.ioCJkx .wrap {
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	}
	.ioCJkx .wrap .imgBox {
	    width: 85px;
	    height: 85px;
	    position: relative;
	}
	.ioCJkx .wrap .imgBox > img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
	.ioCJkx .wrap .imgBox > img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
	img, svg {
	    vertical-align: top;
	}
	.ioCJkx + h3 {
	    color: #fff;
	    font-size: 25px;
	    margin-top: 10px;
	    white-space: pre-wrap;
	    text-align: center;
	}
	.fGkUGU {
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    background: url() 0% 0% / 100% 100% no-repeat;
	    margin: 20px;
	    padding: 18px 15px;
	    border-radius: 0.8rem;
	}
	.cHATSO {
	    display: flex;
	    flex-direction: column;
	    -webkit-box-pack: center;
	    justify-content: center;
	}
	.fA-DUjn {
	    color: #1766ff;
	    font-size: 18px;
	    font-weight: 500;
	    padding: 0px 5px;
	}
	.fGkUGU input {
	    flex: 1 1 0%;
	    padding: 2px 3px;
	    font-size: 16px;
	    background-color: transparent;
	}
	.bMNWhD .pwdIcon {
	    width: 23px;
	    margin-left: 10px;
	    position: relative;
	   
	}
	
	.cXuGMb {
	    text-align: center;
	    height: 75px;
	    line-height:  75px;
	    color: rgb(255, 255, 255);
	    font-size: 19px;
	    font-weight: 600;
	    background: url('/img/login-btn.png') 0% 0% / 100% 100% no-repeat;
	    margin: 30px;
	    border-radius:20px;
	}
	.fCBegJ {
	    color: #1766ff;
	    font-size:20px;
	    font-weight: 600;
	    /* margin-top: 2.5rem; */
	    text-align: center;
	}
	
</style>